<template>
	<view class="container">
		<!-- 地图上的固定定位点 -->
		<div class="fixIcon"><image :src="fixImg"></image></div>
		<!-- 地图 -->
		<view class="map">
			<map style="width: 100%; height: 90vh" :latitude="latitude" :longitude="longitude" :markers="covers"
				scale="15" @regionchange="location_report" show-location="true"> </map>
		</view>
		<view
			:style="`top:${top_offset}px;height:${bottom_up_height}px;width:100%;z-index:50;padding:10rpx;position: fixed;`"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<view class="content-box"
				:style="`top:${top_offset}px;height:${bottom_up_height}px;box-shadow: 1px -1px 8px #606060;`">
				<!-- 定位图标 -->
				<image src="../../static/index/loc.png" mode=""
					style="position: absolute; width: 60rpx; height: 60rpx; top: -60rpx; right: 15rpx"
					@click="back_to_self"></image>

				<view class="movebar"
					style="display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 15rpx; padding: 30rpx 0">
					<view class=""
						style="width: 120rpx; height: 18rpx; background-color: #989898; border-radius: 15rpx; box-shadow: 0 0 10px #dcdcdc inset">
					</view>
				</view>
				<!-- 寻人圈标题 -->
				<view class="title">
					<view class="xrq">
						<view style="width: 3rpx; height: 27rpx; background-color: #69dde8; margin-right: 20rpx">
						</view>
						<view>寻人圈</view>
					</view>
					<view class="chose-box" @click="select_region">
						<view>{{ ((current_city ==="北京市") || (current_city ==='天津市') || (current_city ==='上海市')|| (current_city ==='重庆市') || (current_city ==='香港特别行政区') || (current_city ==='澳门特别行政区')) ? current_city : current_province + current_city }}</view>
						<image class="icon" src="../../static/index/xl.png" mode="" style=""></image>
						<text class="people-number">{{ version == 0 ? '' : version + '志愿者' }}</text>
						<!-- <text class="people-number">0.1.0志愿者</text> -->
					</view>
					<!-- <view>
						<button @click="handleClick">重定向按钮</button>
					</view> -->
				</view>

				<!-- 寻人圈标题 -->
				<view class="tabs" style="height: 600rpx;" @touchmove.stop>
					<view class="nuter">
						<view :class="tabIndex == 0 ? 'active' : ''" @click="changeTabIndex(0)" data-index="0">寻人墙</view>
						<view :class="tabIndex == 1 ? 'active' : ''" @click="changeTabIndex(1)" data-index="1">紧急寻人</view>
						<view :class="tabIndex == 2 ? 'active' : ''" @click="changeTabIndex(2)" data-index="2">已找到</view>
					</view>
					<scrollView height1="50vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll">
						<view class="" v-if="tabIndex === 0">
							<!-- //  寻人墙列表为空 -->
							<view class="no-data-box" v-if="timeOut.list.length == 0">
								<image class="no-data" src="../../static/index/no_data.png" mode="" style="">
								</image>
							</view>

							<!-- 列表不为空 -->
							<view class="check" v-for="(item, index) in timeOut.list" @click="findout_detail_info(item.status, item.id)">
								<view class="check-item">
									<view class="check-title" style="display: block;">
										<view class="mr10">{{ item.title }}</view>
										<view style="color: #717171;font-size: 20rpx;text-align: right;">{{ item.insert_time}} 发起了寻人</view>
									</view>

									<view class="check-tips">
										<image src="../../static/index/zqr.png" class="check-tips-icon"></image>
										<view>{{ item.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
									</view>

									<view class="check-dw">
										<image src="../../static/index/dd.png" class="check-icon"></image>
										<view class="fs20 mr15">{{ item.address }}</view>
										<view class="check-jl">
											<image src="../../static/index/jl.png" class="jl-icon"></image>
											<view>{{ item.distance }}km</view>
										</view>
									</view>

									<view class="check-content">
										<image :src="item.face_img" class="img" v-if="item.face_img.indexOf('https') !== -1"> </image>
										<image :src="vuex_api_HEADER + item.face_img" class="img" v-else> </image>
										<view>
											<view class="fs20 two_line">{{ item.describe }}</view>
											<view class="check-state-box">
												<view class="check-state fs20" style="background-color: #ff871d">
													正在找</view>
												<view class="check-time fs20"
													style="background-color: #46dda2; color: #fff">
													{{ item.lost_time }} </view>
											</view>
										</view>
									</view>

									<view class="check-msg">
										<view class="left-content">
											<view class="msg-icon">
												<image src="../../static/search-detail/ll_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.over_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/pl_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.talk_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/fx_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.share_n }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" v-if="tabIndex === 1">
							<view class="no-data-box" v-if="urgent.list.length == 0">
								<image class="no-data" src="../../static/index/no_data.png" mode="" style="">
								</image>
							</view>
							<view class="check" v-for="(item, index) in urgent.list" @click="findout_detail_info(item.status, item.id)">
								<view class="check-item" >
							<!-- 		<view class="check-title">
										<view class="mr10">{{ item.member_name }}</view>
										<view style="color: #717171">{{ item.insert_time }}发起了寻人</view>
									</view> -->
									<view class="check-title" style="display: block;">
										<view class="mr10">{{ item.title }}</view>
										<view style="color: #717171;font-size: 20rpx;text-align: right;">{{ item.insert_time}} 发起了寻人</view>
									</view>
							
									<view class="check-tips">
										<image src="../../static/index/zjx.png" class="check-tips-icon"></image>
										<view>{{ item.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
									</view>
							
									<view class="check-dw">
										<image src="../../static/index/dd.png" class="check-icon"></image>
										<view class="fs20 mr15">{{ item.address }}</view>
										<view class="check-jl">
											<image src="../../static/index/jl.png" class="jl-icon"></image>
											<view>{{ item.distance }}km</view>
										</view>
									</view>
							
									<view class="check-content">
										<image :src="item.face_img" class="img" v-if="item.face_img.indexOf('https') !== -1"> </image>
										<image :src="vuex_api_HEADER + item.face_img" class="img" v-else> </image>
										<view>
											<view class="fs20 two_line">{{ item.describe }}</view>
											<view class="check-state-box">
												<view class="check-state fs20">
													{{ item.status == 2 ? '进行中' : '正在找' }}</view>
												<view class="check-time fs20">
													<text style="color: #ffffff">{{ item.lost_time }}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="check-msg">
										<view class="left-content">
											<view class="msg-icon">
												<image src="../../static/search-detail/ll_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.over_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/pl_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.talk_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/fx_2.png"
													style="width: 30rpx; height: 30rpx"></image>
												<view>{{ item.share_n }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="" v-if="tabIndex === 2">
							<view class="no-data-box" v-if="finish.list.length == 0">
								<image class="no-data" src="../../static/index/no_data.png" mode="" style="">
								</image>
							</view>
							<view class="check" v-for="(item, index) in finish.list" @click="findout_detail_info(item.status, item.id)">
								<view class="check-item">
									<!-- <view class="check-title">
										<view class="mr10">{{ item.member_name }}</view>
										<view style="color: #717171">{{ item.insert_time }}发起了寻人</view>
									</view> -->
									<view class="check-title" style="display: block;">
										<view class="mr10">{{ item.title }}</view>
										<view style="color: #717171;font-size: 20rpx;text-align: right;">{{ item.insert_time}} 发起了寻人</view>
									</view>
							
									<view class="check-tips">
										<image src="../../static/index/zjx.png" class="check-tips-icon"></image>
										<view>{{ item.lost_typt == 0 ? '找亲人' : '帮忙找' }}</view>
									</view>
							
									<view class="check-dw">
										<image src="../../static/index/dd.png" class="check-icon"></image>
										<view class="fs20 mr15">{{ item.address }}</view>
										<view class="check-jl">
											<image src="../../static/index/jl.png" class="jl-icon"></image>
											<view>{{ item.distance }}</view>
										</view>
									</view>
							
									<view class="check-content" >
										<image :src="item.face_img" class="img" v-if="item.face_img.indexOf('https') !== -1"> </image>
										<image :src="vuex_api_HEADER + item.face_img" class="img" v-else> </image>
										<view>
											<view class="fs20 two_line">{{ item.describe }}</view>
											<view class="check-state-box">
												<view class="check-state fs20" style="background-color: #69dde8">已找回
												</view>
												<view class="check-time fs20" style="background-color:#F4F4F4;color:#9E9E9E;">用时{{ item.lost_time }}</view>
											</view>
										</view>
									</view>
							
									<view class="check-msg">
										<view class="left-content">
											<view class="msg-icon">
												<image src="../../static/search-detail/ll_2.png" class="icon">
												</image>
												<view>{{ item.over_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/pl_1.png" class="icon"></image>
												<view>{{ item.talk_n }}</view>
											</view>
											<view class="msg-icon">
												<image src="../../static/index/fx_2.png" class="icon"></image>
												<view>{{ item.share_n }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<ourLoading isFullScreen :active="active" text="loading..." color="#13b6ff" textColor="#13b6ff" />
						<!-- // 返回顶部 -->
						<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
					</scrollView>
				</view>
			</view>
		</view>
		<!-- <view style="display: fixed;width: 80vw;left: -10vw;height: 400rpx;z-index: 100;border: 1px solid #000000;"> -->
		<view class="nav" style="z-index: 100">
			<navigator url="/pages/make/make_list">
				<!-- <navigator url="/pages/scan-face/test"> -->
				<view class="nav-bar">
					<image class="icon" src="../../static/index/xr_2.png" mode=""></image>
					<view class="nav_icon">发布寻人</view>
				</view>
			</navigator>
			<navigator url="/pages/scan-face/scan-face">
				<!-- <navigator url="/pages/index/tst"> -->
				<view class="nav-bar">
					<image class="icon" src="../../static/index/slsr_2.png" mode=""></image>
					<view class="nav_icon">扫脸识人</view>
				</view>
			</navigator>
			<navigator url="/pages/facebook/facebook">
				<view class="nav-bar">
					<image class="icon" src="../../static/index/lp_2.png" mode=""></image>
					<view class="nav_icon">创建脸谱</view>
				</view>
			</navigator>
			<navigator url="/pages/self/self">
				<view class="nav-bar">
					<image class="icon" :src="vuex_user_info.headimgurl || '../../static/index/wd_2.png'" mode=""
						style="border-radius: 50%"></image>
					<view class="nav_icon">我的</view>
				</view>
			</navigator>
		</view>

		<view class="focus">
			<image class="im1" src="../../static/index/logo.jpg"></image>
			<text>人人寻公众平台</text>
			<image class="im2" src="../../static/index/focus.png"></image>
			<text @click="show_QRcode">关注</text>
		</view>
		<!-- 位置选择器 -->
		<u-select v-model="show_picker" mode="mutil-column-auto" :list="region_list" @confirm="switch_to_another_city">
		</u-select>
		<!-- 位置选择器 -->
		<!-- <u-picker v-model="show_picker" mode="multiSelector"></u-picker> -->

		<u-toast ref="uToast" />
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="model_confirm()"
			@cancel="model_cancel" :async-close="true"></u-modal>
		<!-- 弹出公众号二维码 -->
		<u-mask :show="show_QR" @click="show_QR = false">
			<view class="QR-box">
				<image class="img" :src="this.ENV == 0 ? '../../static/index/QR.jpg' : '../../static/index/QR1.jpg'"
					mode=""></image>
				<text class="txt">长按图片【识别二维码】，关注人人寻公众号</text>
				<view class="line"></view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import scrollView from '../../components/scroll-view/scroll-view.vue';
	import ourLoading from '../../components/Loading/index.vue';
	import selfRoll from '../../components/self-roll/roll.vue';

	export default {
		components: {
			scrollView,
			ourLoading,
			selfRoll
		},
		data() {
			return {
				region_list: [],
				version: '',
				current_city: '武汉市',
				prev_city_id: '179', //切换地域后 两个id不一致 清空列表
				current_city_id: '179',
				current_province: '湖北省',
				show_picker: false,
				model_show: false,
				model_content: '',
				infoType: [{
						type: 3 //[0]  寻人墙
					},
					{
						type: 4 //[1] 紧急寻人
					},
					{
						type: 2 //[2]  已找回
					}
				],
				infoList: {
					//寻人类型
					urgent: [],
					timeout: [],
					finish: []
				},
				info: [],
				code: '',
				// 当前tab位置
				tabIndex: 0,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 30.501664,
				longitude: 114.414321,
				covers: [],
				cover_img: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
				// coverUser: {
				// 	//第一个对象是地图的中心点，余下的元素是周边的定位点
				// 	latitude: 30.501664,
				// 	longitude: 114.414321,
				// 	iconPath: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
				// 	width: 35,
				// 	height: 35
				// }
				del_id: '', // 用户要删除信息的id编号
				// 控制一些加载动画的显示

				// 控制首页上下滑动
				params: {
					min_top_offset_rate: 0.3, // 距离顶部的最小距离
					max_top_offset_rate: 0.7 // 距离顶部的最大距离
				},
				phoneHeight: 0,
				slide_dir: 0,
				current_Y: 0,
				before_Y: 0,
				max_top_offset: 0,
				min_top_offset: 0,
				top_offset: 0,
				bottom_up_height: 0,
				show_QR: false,
				// 选择框默认显示当前位置
				// default_city_arr: [8, 2],
				
				// 新tab栏数据
				// 往左滑动的距离
				scrollleft: 0,
				isReloadComplete: false,
				isNoData: true,
				// 紧急寻人
				urgent: {
					page: 1,
					size: 10,
					list: [],
					isReloadComplete: false,
					isNoData: true
				},
				// 寻人圈
				timeOut: {
					page: 1,
					size: 10,
					list: [],
					isReloadComplete: false,
					isNoData: true,
				},
				// 完成
				finish: {
					page: 1,
					size: 10,
					list: [],
					isReloadComplete: false,
					isNoData: true,
				},
				iserror:false,
				active: true,
				roll: false, //返回顶部
				right: '80vw', //右侧距离
				systemHeight: 0, //系统高度
				isShowBottomView: false,
				fixImg: '../../static/index/icon1.png'
			}
		},
		async onLoad(op) {
			this.$u.vuex('vuex_api_HEADER', this.ENV == 0 ? 'https://xapi.rrxun.cn' : 'https://rapi.rrxun.cn')
			this.$u.vuex('vuex_index_page', this.ENV == 0 ? 'https://x.rrxun.cn' : 'https://web.rrxun.cn')
			this.systemHeight = this.getSystemMsg('windowHeight');
			let from_uid = window.location.href.split('#')[0].split('from_uid=')[1];
			if (from_uid) {
				this.$u.vuex('vuex_from_uid', `?from_uid=${from_uid}`);
			}
			this.get_sys_info()
			if (this.vuex_request_token != 'no_value') {
				this.get_firstpage_lookfor_list(0)
			}
			await this.getAddr();
			uni.getStorage({
				key: 'pageUrl',
				success(e) {
					console.log('e.data', e.data) //这就是你想要取的token
				}
			})
		},
		methods: {
			//  获取更新地址
			getAddr() {
				let self = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						let tag = {
							lat: parseFloat(res.latitude).toFixed(7),
							lon: parseFloat(res.longitude).toFixed(7)
						}
						// 切换地图到中心点
						self.$data.longitude =  tag.lon;
						self.$data.latitude = tag.lat;
						// 更新用户位置
						self.$u.api.update_euser_realtime_location({
							lon: tag.lon,
							lat: tag.lat
						}).then((res) => {
							if (res.code == 200) {
								self.version = res.data.count //	当前市用户数量
								self.current_city = res.data.city // 	市名
								self.current_city_id = res.data.city_id // 市id
								self.prev_city_id = res.data.province_id // 省id
								self.current_province = res.data.province // 省名
								// 获取周边用户
								self.$u.api.get_userDistribution({
									lon: tag.lon,
									lat: tag.lat
								}).then((res) => {
									if (res.code == 200) {
										let arr = []
										for (let i = 0; i < res.data.length; i++) {
											arr.push({
												latitude: res.data[i].lat,
												longitude: res.data[i].lon,
												iconPath: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
												width: 35,
												height: 35
											})
										}
										self.covers = arr;
									}
								})
							}
							// 获取周边志愿者
						})
					},
					fail: function(res) {
						console.log('更新位置失败', res)
					}
				})
				if (this.vuex_city_list == 'no_value') {
					this.get_region_list()
				} else {
					this.region_list = this.vuex_city_list
				}
			},
			// 弹出公众号二维码
			show_QRcode() {
				this.show_QR = true
			},
			// 更新位置信息
			// user_update_location() {
			// 	// 先获取位置 再更新位置
			// 	let self = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			self.$u.vuex('vuex_location', loc)
			// 			self.$u.api.update_euser_realtime_location({
			// 				lon: res.longitude,
			// 				lat: res.latitude
			// 			})
			// 		}
			// 	})
			// },
			// 弹出区域选择器
			select_region() {
				this.show_picker = true
			},
			// 切换到其他城市
			switch_to_another_city(info) {
				let self = this
				this.current_city = info[1].label
				this.current_province = info[0].label
				this.current_city_id = info[1].value
				if (this.current_city_id != this.prev_city_id) {
					//1清空列表
					this.infoList = {
						urgent: [],
						timeout: [],
						finish: []
					}
					// 清空页码
					this.pageX = [0, 0, 0];
					(this.pageCnt = [-1, -1, -1]),
					// 2 更新id
					(this.prev_city_id = this.current_city_id)

					// 重置地图中心点
					this.$u.api.analyze_cityid_to_loc({
						city_id: this.current_city_id
					}).then((res) => {
							if (res.code == 200) {
								self.latitude = res.data.lat
								self.longitude = res.data.lon
								// 获取周边志愿者人数
								this.$u.api
									.get_city_human_distribution({
										city_id: this.current_city_id
									})
									.then((res) => {
										if (res.code == 200) {
											self.version = res.data.count
											// 获取志愿者空间分布位置
											self.$u.api
												.get_userDistribution({
													lat: parseFloat(self.latitude).toFixed(7),
													lon: parseFloat(self.longitude).toFixed(7)
												})
												.then((res) => {
													if (res.code == 200) {
														let arr = []
														for (let i = 0; i < res.data.length; i++) {
															arr.push({
																latitude: parseFloat(res.data[i].lat).toFixed(7),
																longitude: parseFloat(res.data[i].lon).toFixed(7),
																iconPath: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
																width: 35,
																height: 35
															})
														}
														self.covers = arr
													}
												})

											// 3 获取首页寻人列表
											this.tabIndex = 0;
											this.scrollleft = 0;
											this.isReloadComplete = false;
											this.isNoData = true;
											this.urgent = {
												page: 1,
												size: 5,
												list: [],
												isReloadComplete: false,
												isNoData: true
											};
											// 寻人圈
											this.timeOut = {
												page: 1,
												size: 5,
												list: [],
												isReloadComplete: false,
												isNoData: true,
											};
											// 完成
											this.finish = {
												page: 1,
												size: 5,
												list: [],
												isReloadComplete: false,
												isNoData: true,
											};
											this.iserror = false;
											this.active = true;
											this.roll= false; //返回顶部
											this.isShowBottomView = false;
											this.get_firstpage_lookfor_list(this.tabIndex);
										} else {}
									})
							}
						})
				}
			},
			// 获取地区列表
			get_region_list() {
				let province = []
				let city = []
				let country = []
				this.$u.api.get_region_list().then((res) => {
					let cook = res.data
					let myArr = []
					let tempArr = []
					let localArr = []
					for (var i = 0; i < cook.length; i++) {
						for (var j = 0; j < cook[i].children.length; j++) {
							tempArr.push({
								label: cook[i].children[j].label,
								value: cook[i].children[j].value
							})
						}
						localArr = {
							label: cook[i].label,
							value: cook[i].value,
							children: tempArr
						}
						myArr.push(localArr)
						tempArr = []
						localArr = []
					}
					this.$u.vuex('vuex_city_list', myArr)
					this.region_list = this.vuex_city_list
				})
			},
			// 拼接地区选择器数据
			getRegionList() {
				this.$u.api.get_region_list().then((res) => {
					let cook = res.data
					let myArr = []
				})
			},
			// 查看寻人详情信息
			findout_detail_info(status, id) {
				uni.navigateTo({
					url: `../detail/detail?id=${id}&status=${status}`
				})
			},
			// 用户点击同意授权 拿到微信提供的code
			userlogin_get_wechat_code(oauth_url) {
				if (oauth_url != null) {
					// 跳转到登录界面
					window.location.href = oauth_url
				}
			},
			// 获取会员信息
			async get_user_social_info() {
				let res = await this.$u.api.get_user_social_info()
				this.$u.vuex('vuex_user_info', res.data)
			},
			changeTabIndex(index) {
				this.tabIndex = index;
				this.isShowBottomView = false;
				switch (index) {
					case 0:
						this.isReloadComplete = this.timeOut.isReloadComplete;
						this.isNoData = this.timeOut.isNoData;
					break
					case 1:
						this.isReloadComplete = this.urgent.isReloadComplete;
						this.isNoData = this.urgent.isNoData;
					break
					case 2:
						this.isReloadComplete = this.finish.isReloadComplete;
						this.isNoData = this.finish.isNoData;
					break
				}
				if(!this.timeOut.list.length || !this.urgent.list.length || !this.finish.list.length) {
					this.get_firstpage_lookfor_list(index);
				}
				uni.$emit('goTop', '');
				this.$set(this, 'roll', false)
				
			},
			async get_firstpage_lookfor_list(tabIndex) {
				let self = this;
				this.iserror = true;
				let params = {};
				switch (tabIndex) {
					case 0:
						params = {
							type: 3,
							page: self.timeOut.page,
							psize: self.timeOut.size,
							city_id: self.current_city_id
						}
					break
					case 1:
						params = {
							type: 4,
							page: self.urgent.page,
							psize: self.urgent.size,
							city_id: self.current_city_id
						}
					break
					case 2:
						params = {
							type: 2,
							page: self.finish.page,
							psize: self.finish.size,
							city_id: self.current_city_id
						}
					break
				}
				const res = await this.$u.api.get_firstpage_lookfor_list(params);
				if(res.code === 200) {
					switch (tabIndex) {
						case 0:
							if(self.timeOut.page === 1) {
								// 首次加载
								self.timeOut.list = res.data.data;
								self.timeOut.page_count = res.data.page_count;
							} else {
								self.timeOut.list.push(...res.data.data)
							}
						break
						case 1:
							if(self.urgent.page === 1) {
								// 首次加载
								self.urgent.list = res.data.data;
								self.urgent.page_count = res.data.page_count;
							} else {
								self.urgent.list.push(...res.data.data)
							}
						break
						case 2:
							if(self.finish.page === 1) {
								// 首次加载
								self.finish.list = res.data.data;
								self.finish.page_count = res.data.page_count;
							} else {
								self.finish.list.push(...res.data.data)
							}
						break
					}
					this.iserror = true;
				} else {
					this.iserror = true;
				}
			},
			// 模态框确认
			model_confirm() {
				this.$u.api
					.user_cancel_lookfor_event({
						id: this.del_id
					})
					.then((res) => {
						this.model_show = false
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						})
					})
			},
			// 模态框取消
			model_cancel() {
				this.model_show = false
			},
			// 以下函数用来控制滚动
			touchStart(event) {
				let self = this
				self.current_Y = event.touches[0].clientY
				// 动态移动过程中,上一个阶段的top_slide轴坐标
				self.before_Y = self.current_Y
			},
			touchMove(event) {
				let self = this
				var current_Y = event.touches[0].clientY
				/*+ — —— —— —— —— --→x (正方向)
				  |
					| . before_Y
					| 
					| . clientY
					↓
					*/
				self.slide_dir = current_Y - self.before_Y > 0 ? 'down' : 'up'

				if (self.slide_dir == 'down') {
					if (self.top_offset >= self.max_top_offset) {
						self.before_Y = current_Y
						return
					}
					self.bottom_up_height -= Math.abs(current_Y - self.before_Y)
					self.top_offset += current_Y - self.before_Y
					self.before_Y = current_Y
				} else {
					// 向上
					if (self.top_offset <= self.min_top_offset) {
						self.before_Y = current_Y
						return
					}
					self.bottom_up_height += self.before_Y - current_Y
					self.top_offset -= self.before_Y - current_Y
					self.before_Y = current_Y
				}
			},
			touchEnd(event) {
				// 实现弹动效果
				let S = this.max_top_offset - this.min_top_offset
				let base = this.phoneHeight - this.max_top_offset
				let temp = 0
				if (this.slide_dir == 'down') {
					// 回到底部 ↓
					if (this.bottom_up_height < base + (3 / 3) * S) {
						temp = base
						this.top_offset = this.phoneHeight - temp
						this.bottom_up_height = temp
						return
					}
				} else {
					// 回到顶部位置 ↑
					if (this.bottom_up_height > base + (1 / 4) * S) {
						this.bottom_up_height = base + S
						this.top_offset = this.phoneHeight - this.bottom_up_height
						return
					}
				}
			},
			// 获取当前手机的系统信息
			get_sys_info() {
				let self = this
				uni.getSystemInfo({
					success(res) {
						// 确定屏幕高度
						self.phoneHeight = res.windowHeight
						self.min_top_offset = self.phoneHeight * self.params.min_top_offset_rate
						self.max_top_offset = self.phoneHeight / 2 + 40 + 40 + 30
						self.top_offset = self.max_top_offset
						self.bottom_up_height = self.phoneHeight - self.max_top_offset
					}
				})
			},
			// 报告地理位置
			location_report(e) {
				if (e.type == 'end') {
					this.fixImg = '../../static/index/icon2.gif';
					setTimeout(() => {
						this.fixImg = '../../static/index/icon1.png';
					}, 1200)
					let lat = parseFloat(e.target.centerLocation.latitude).toFixed(7)
					let lon = parseFloat(e.target.centerLocation.longitude).toFixed(7)
					this.longitude = lon
					this.latitude = lat
					this.$u.api.get_userDistribution({
						lat: lat,
						lon: lon
					}).then((res) => {
							if (res.code == 200 && res.data.length != 0) {
								let arr = []
								for (var i = 0; i < res.data.length; i++) {
									arr.push({
										latitude: res.data[i].lat,
										longitude: res.data[i].lon,
										iconPath: res.data[i].headimgurl,
										width: 35,
										height: 35
									})
								}
								self.covers = arr;
							}
						})
				}
			},
			// 点击定位按钮，回到当前定位的位置
			back_to_self() {
				let self = this;
				uni.getLocation({
					type: 'wgs84'
				}).then((res) => {
					let lat = res[1].latitude
					let lon = res[1].longitude
					// 回到中心点
					this.$set(self, 'latitude', lat);
					this.$set(self, 'longitude', lon);
					let tag = {
						lat: parseFloat(lat).toFixed(7),
						lon: parseFloat(lon).toFixed(7)
					};
					(async () => {
						let res = await self.$u.api.update_euser_realtime_location({
							lon: tag.lon,
							lat: tag.lat
						})
						if (res.code == 200) {
							self.version = res.data.count //	当前市用户数量
							self.current_city = res.data.city // 	市名
							self.current_city_id = res.data.city_id //  市id
							self.prev_city_id = res.data.province_id //  省id
							self.current_province = res.data.province //  省名
							// 获取周边志愿者位置
							let loc_res = await self.$u.api.get_userDistribution({
								lon: tag.lon,
								lat: tag.lat
							})
							if (loc_res.code == 200) {
								if (loc_res.data.length != 0) {
									let arr = []
									// arr.push({
									// 	//将中心点位置放在数组第一个元素
									// 	latitude: tag.lati,
									// 	longitude: tag.longi,
									// 	iconPath: self.vuex_user_info.headimgurl,
									// 	width: 30,
									// 	height: 30
									// })
									for (var i = 0; i < loc_res.data.length; i++) {
										arr.push({
											latitude: loc_res.data[i].lat,
											longitude: loc_res.data[i].lon,
											iconPath: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
											width: 30,
											height: 30
										})
									}
									// self.covers = arr
									this.$set(self, 'covers', arr);
									self.tabIndex = 0;
									self.scrollleft = 0;
									self.isReloadComplete = false;
									self.isNoData = true;
									self.urgent = {
										page: 1,
										size: 5,
										list: [],
										isReloadComplete: false,
										isNoData: true
									};
									// 寻人圈
									self.timeOut = {
										page: 1,
										size: 5,
										list: [],
										isReloadComplete: false,
										isNoData: true,
									};
									// 完成
									self.finish = {
										page: 1,
										size: 5,
										list: [],
										isReloadComplete: false,
										isNoData: true,
									};
									self.iserror = false;
									self.active = true;
									self.roll= false; //返回顶部
									self.isShowBottomView = false;
									self.get_firstpage_lookfor_list(self.tabIndex);
								} else {}
							}
						}
					})()
				})
			},
			//新tab栏事件
			downdata() {
				let self = this;
				this.isShowBottomView = false;
				setTimeout(() => {
					this.active = false;
					uni.$emit('downdataHD', {
						type: 'down'
					});
					switch (this.tabIndex) {
						case 0:
							self.timeOut.page = 1;
							self.timeOut.list = [];
							self.timeOut.isReloadComplete = false;
							self.timeOut.isNoData = true;
							self.isReloadComplete = self.timeOut.isReloadComplete;
							self.isNoData = self.timeOut.isNoData;
							break
						case 1:
							self.urgent.page = 1;
							self.urgent.list = [];
							self.urgent.isReloadComplete = false;
							self.urgent.isNoData = true;
							self.isReloadComplete = self.urgent.isReloadComplete;
							self.isNoData = self.urgent.isNoData;
							break
						case 2:
							self.finish.page = 1;
							self.finish.list = [];
							self.finish.isReloadComplete = false;
							self.finish.isNoData = true;
							self.isReloadComplete = self.finish.isReloadComplete;
							self.isNoData = self.finish.isNoData;
					}
					this.get_firstpage_lookfor_list(this.tabIndex);
				}, 1000)
				
				
			},
			updata() {
				let self = this;
				this.isShowBottomView = true;
				switch (this.tabIndex) {
					case 0:
						if(self.timeOut.page < self.timeOut.page_count) {
							self.timeOut.page++;
						} else {
							self.timeOut.isReloadComplete = true;
							self.timeOut.isNoData = false;
							self.isReloadComplete = self.timeOut.isReloadComplete;
							self.isNoData = self.timeOut.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
					case 1:
						if(self.urgent.page < self.urgent.page_count) {
							self.urgent.page++;
						} else {
							self.urgent.isReloadComplete = true;
							self.urgent.isNoData = false;
							self.isReloadComplete = self.urgent.isReloadComplete;
							self.isNoData = self.urgent.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
					case 2:
						if(self.finish.page < self.finish.page_count) {
							self.finish.page++;
						} else {
							self.finish.isReloadComplete = true;
							self.finish.isNoData = false;
							self.isReloadComplete = self.finish.isReloadComplete;
							self.isNoData = self.finish.isNoData;
							uni.$emit('updataHD', {
								type: 'up'
							});
							this.isShowBottomView = false;
							return 
						}
						break
				}
				this.get_firstpage_lookfor_list(this.tabIndex);
				this.isShowBottomView = false;
			},
			onScroll(e) {
				if (e.scrollTop > this.systemHeight) {
					this.roll = true;
				} else {
					this.roll = false;
				}
			},
			/*scrollview返回远点*/
			scrollTo() {
				uni.$emit('goTop', '');
			},
			//获取系统参数
			getSystemMsg: function(key) {
				var result = '';
				uni.getSystemInfo({
					success: (res) => {
						if (key === 'windowHeight') {
							result = res.windowHeight;
						}
					}
				});
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixIcon {
		position: fixed;
		top: 40vh;
		left: 50vw;
		width: 50rpx;
		height: 50rpx;
		z-index: 2;
		background: url(../../static/index/icon1.png) no-repeat;
		background-size: 100% 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.fs20 {
		font-size: 20rpx;
	}

	.two_line {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.mr10 {
		margin-right: 10rpx;
		font-weight: 700;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: calc(100% - 133rpx);
	}

	.mr15 {
		margin-right: 15rpx;
	}

	// 地图
	.map {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 99.9vh;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;

		width: 100vw;
		height: 110rpx;
		font-size: 18rpx;
		background-color: #fff;

		position: absolute;
		left: 50%;
		bottom: 0px;
		transform: translateX(-50%);
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;

		.nav-bar {
			.icon {
				width: 50rpx;
				height: 50rpx;
			}

			.nav_icon {
				color: #000;
				font-size: 20rpx;
			}
		}
	}

	.container {
		background-color: #eeeeee;
		position: relative;
		width: 100%;
		height: 100%;

		.focus {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 65rpx;
			line-height: 65rpx;
			background-color: #ffffff;
			border-top: 1px solid #f5f5f5;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding-left: 20rpx;

			.im1 {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
			}

			.im2 {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}

		.left_top {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 380rpx;
			height: 72rpx;
			color: #666;
			background-color: #fff;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(41, 41, 41, 0.12);
			position: absolute;
			top: 53rpx;
			left: 29rpx;

			.left {
				display: flex;
				justify-content: center;
				align-items: center;

				.city {
					display: flex;
					color: #666;
					font-weight: 700;
					margin-right: 9rpx;
				}

				.icon {
					width: 16rpx;
					height: 9rpx;
					margin-right: 12rpx;
				}
			}

			.right {}
		}

		.info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 182rpx;
			height: 72rpx;
			background-color: #e4fafd;
			position: absolute;
			right: 0;
			top: 53rpx;

			.img {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				left: -48rpx;
				top: 0;
			}

			.energy {
				width: 68rpx;
				height: 38rpx;
				background-color: #68c15e;
				border-radius: 19rpx;
				text-align: center;
				color: #fff;
				font-weight: 700;
				font-size: 24rpx;
			}
		}

		.content-box {
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			// align-items: center;
			background-color: #f7f7f7;
			width: 100%;
			// height: 650rpx;
			margin: 0 auto;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;

			.title {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 16rpx 18rpx;
				border-bottom: 1rpx solid #eee;
				width: 727rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 15rpx;

				.xrq {
					color: #69dde8;
					font-weight: 700;
					display: flex;
					align-items: center;
					margin-right: 40rpx;
				}

				.chose-box {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					color: #666;

					.icon {
						width: 16rpx;
						height: 20rpx;
						margin: 0rpx 15rpx;
					}

					.people-number {}
				}
			}

			.tabs {
				.nuter {
					background-color: #fff;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: space-around;
					font-size: 35rpx;
					margin-bottom: 6rpx;
				}

				.nuter view {
					flex: 1;
					font-size: 30rpx;
					text-align: center;
					transition: all 0.5s ease 0.1s;
					background-color: #fff;
				}

				.active {
					width: 100rpx;
					box-sizing: border-box;
					color: #ff0000;
					border-bottom: 5rpx solid #ff0000;
					background-color: #f3ffff;
					border-radius: 2rpx;
					/* box-shadow: 3px 3px 5px #888888; */
				}

				.no-data-box {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.no-data {
						width: 435rpx;
						height: 343rpx;
						align-self: center;
					}
				}

				.check {
					margin: 0 auto;
					margin-bottom: 12rpx;
					background-color: #fff;
					padding: 24rpx;
					box-shadow: 0px 9px 12px 0px rgba(70, 215, 220, 0.12);
					border-radius: 10rpx;

					.check-item {
						position: relative;

						.check-title {
							display: flex;
						}

						.check-tips {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 133rpx;
							height: 55rpx;
							background-color: #ffeef0;
							border-radius: 10rpx;
							color: #ff5b76;
							position: absolute;
							top: -24rpx;
							right: -24rpx;

							.check-tips-icon {
								width: 24rpx;
								height: 24rpx;
								margin-right: 7rpx;
							}
						}

						.check-dw {
							display: flex;
							align-items: center;

							.check-icon {
								width: 24px;
								height: 25px;
							}

							.check-jl {
								display: flex;
								justify-content: center;
								align-items: center;
								width: auto;
								height: 40rpx;
								background-color: #f4f4f4;
								border-radius: 5rpx;
								font-size: 20rpx;
								padding: 0 10rpx;

								.jl-icon {
									width: 16rpx;
									height: 17rpx;
									margin-right: 6rpx;
								}
							}
						}

						.check-content {
							display: flex;
							align-items: center;
							border: 1rpx solid #eee;
							border-radius: 8rpx;

							.check-wrong {
								display: flex;
								// justify-content: center;
								align-items: center;
								margin-top: 10rpx;
								width: 320rpx;
								height: 36rpx;
								// border: 1rpx solid #FF0000;
								// color: #FF0000;

								.icon {
									width: 32rpx;
									height: 32rpx;
								}
							}

							.img {
								width: 119rpx;
								height: 123rpx;
								border-radius: 10rpx;
								flex: 0 0 119rpx;
								margin-right: 18rpx;
							}

							.check-state-box {
								display: flex;
								margin-top: 10rpx;
							}

							.check-state {
								background-color: #ff871d;
								width: 123rpx;
								height: 36rpx;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							.check-time {
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #46dda2;
								color: #9e9e9e;
								width: auto;
								height: 36rpx;
								padding: 0 10rpx;
							}
						}

						.check-msg {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 13rpx;

							.left-content {
								display: flex;
								color: #8f8f8f;

								.msg-icon {
									display: flex;
									align-items: center;
									margin-right: 17rpx;

									.icon {
										width: 21px;
										height: 15px;
										margin-right: 7rpx;
									}
								}
							}

							.del-btn {
								display: flex;
								justify-content: center;
								align-items: center;
								color: #fff;
								width: 81rpx;
								height: 30rpx;
								background-color: #8f8f8f;
								border-radius: 5rpx;
							}
						}
					}
				}

				.swiper-item {
					overflow-y: scroll;
					width: 99.5%;
					height: 99%;
					/* background-color: white; */
					/* height: 99%; */
					box-sizing: border-box;
					padding: 1rpx;
				}
			}
		}

		.QR-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			padding-top: 350rpx;

			.img {
				width: 300rpx;
				height: 300rpx;
			}

			.txt {
				color: white;
				width: auto;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
				// border-bottom: 1px solid #F5F5F5;
			}

			.line {
				width: 75%;
				border-bottom: 1px solid #f5f5f5;
				height: 2px;
			}
		}

		// .scroll-view-st {
		// height: 600rpx;
		// background-color: pink;
		// }
	}
</style>
